<template>
    <div>
        <div>
            <div class="pt-2 pb-2">
                <el-button type="primary" size="mini" @click="addDictionary">添加</el-button>
            </div>
        </div>
        <div>
            <tabs :keyData="tabHead" :total="total" :tableData="tableData" @handleCurrentChange="handleCurrentChange"
                @handleSizeChange="handleSizeChange">
                <template #center="{ row }">
                    <Obutton :bttonData="row" @bClock="modifyData" @DataDel="DataDel"></Obutton>
                </template>
            </tabs>
        </div>
        <div>
            <el-dialog :visible.sync="dialogVisible" width="35%" :modal-append-to-body="false">
                <div>
                    <div class="ta-c fz-3 fw-6">
                        <span>字典添加</span>
                    </div>
                    <div class="pt-3 wid-10" v-if="dialogVisible">
                        <dynamicForm :dataUire="formDictionary" :formData="formData">
                            <template #center="{ row }">
                                <div class="bodysButton flex">
                                    <div>
                                        <el-button type="primary" size="small" @click="submit(row)">确认</el-button>
                                    </div>
                                    <div class="pl-10">
                                        <el-button type="info" size="small"
                                            @click="dialogVisible = false">取消</el-button>
                                    </div>
                                </div>
                            </template>
                        </dynamicForm>
                    </div>
                    <div></div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { getDictionary, getOrderAdd, pathOrder,delOrder } from '@/api/dictionary'
import moment from 'moment'

export default {
    data() {
        return {

            formData: {},
            tableData: [],
            tabHead: [
                { key: "code", name: "编码" },
                { key: "id", name: "id" },
                { key: "identifying", name: "类型" },
                { key: "enable", name: "是否启用" },
                { key: "definition", name: "中文名称" },
                { key: "createdAt", name: "创建时间" },
                { key: "updatedAt", name: "修改时间" },
            ],
            formDictionary: [
                { key: "code", name: "编码", type: "text" },
                { key: "identifying", name: "类型", type: "text" },
                {
                    key: "enable", name: "是否启用", type: "select", children: [
                        { value: true, label: "是" },
                        { value: false, label: "否" }
                    ]
                },
                { key: "definition", name: "中文名称", type: "text" },

            ],
            dialogVisible: false,
            total: 0,
            pagination: {
                limit: 10,
                page: 1,
            }
        }
    },
    mounted() {
        this.getDictionary()
    },
    methods: {
    // 删除
       async DataDel(e) {
             await delOrder(e)
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
            this.getDictionary()
        },
        modifyData(event) {
            this.addDictionary()
            this.formData = event
        },
        async submit(e) {
            let obj = {
                ...this.formData,
                ...e
            }
            obj.code = Number(obj.code)
            if (e.id) {
                await this.routEdit(e.id, obj)
                this.$message({
                    message: '操作成功',
                    type: 'success'
                });
                this.getDictionary()
                return this.dialogVisible = false;
            }
            await this.routAdd(obj)
            this.$message({
                message: '操作成功',
                type: 'success'
            });
            this.dialogVisible = false;
            this.getDictionary()
        },
        async routAdd(obj) {
            let res = await getOrderAdd(obj)
            console.log(res);
        },
        async routEdit(id, obj) {
            obj.enable = obj.enable === "是"? true : false
            let res = await pathOrder(id, obj)
            console.log(res);
        },
        // 获取全部字典
        async getDictionary() {
            let tableData = []
            let res = await getDictionary(this.pagination)
            tableData = res.list.map(item => {
                item.enable = item.enable ? "是" : "否"
                item.createdAt = moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss");
                item.updatedAt = moment(item.updatedAt).format("YYYY-MM-DD HH:mm:ss");
                return item
            })
            this.tableData = tableData
            this.total = res.pagination.total
            // console.log(res.list);
        },
        addDictionary() {
            this.formData = {}
            this.dialogVisible = true
        },
        handleSizeChange(e) {
            // delete this.pagination.total
            this.pagination.limit = e
            this.getDictionary()
        },
        handleCurrentChange(e) {
            // delete this.pagination.total
            this.pagination.page = e
            this.getDictionary()
        }

    }
}
</script>
<style scoped>
@import url("./../../assets/scss/index.css");

.bodys {
    flex-wrap: wrap;
}

.bodyStyle {
    border: 1px dashed rgb(0, 73, 62);
    padding: 0 2px;
}

.bodysButton button {
    width: 100px;
}
</style>